<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="文章标题" prop="articleTitle">
        <el-input
          :readonly="mode == 'view'"
          v-model="form.articleTitle"
          :maxlength="20"
        ></el-input>
      </el-form-item>
      <el-form-item label="枚举值" prop="articleType">
        <el-input
          :readonly="mode == 'view'"
          v-model="form.articleType"
          :maxlength="20"
        ></el-input>
      </el-form-item>
      <el-form-item label="文本内容" style="height: 65vh" prop="articleDetails">
        <Editor
          style="height: 55vh"
          @on-change="onChange"
          :value="form.articleDetails"
          :readOnly="mode == 'view'"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" v-if="mode != 'view'"
          >保存</el-button
        >
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import Editor from "@/components/Editor";
import { validAlphabets } from "@/utils/validate.js";
import {
  apiArticleAdd,
  apiArticleEdit,
  apiArticleGetOne,
  apiArticleGetByType,
} from "@/api/article";
export default {
  components: { Editor },

  data() {
    return {
      form: {
        articleTitle: "",
        articleDetails: "",
        articleType: "",
      },
      rules: {
        articleTitle: [
          { required: true, message: "请输入文章标题", trigger: "blur" },
        ],
        articleDetails: [
          { required: true, message: "请输入文本内容", trigger: "blur" },
        ],
        articleType: [
          { required: true, message: "请输入枚举值", trigger: "blur" },
          {
            required: true,
            pattern: /[A-Za-z]+/,
            message: "仅支持英文,且不可重复",
            trigger: "blur",
          },
        ],
      },
      articleId: "",
      mode: "add",
    };
  },
  mounted() {
    const { id, mode } = this.$route.query;
    this.articleId = id;
    this.mode = mode || "add";
    if (this.mode == "edit" || this.mode == "view") {
      this.getData();
    }
  },
  methods: {
    getData() {
      apiArticleGetOne({ articleId: this.articleId }).then((res) => {
        this.form = {
          articleDetails: res.data.articleDetails,
          articleType: res.data.articleType,
          articleTitle: res.data.articleTitle,
        };
      });
    },
    onChange(e) {
      console.log(e);
      this.form.articleDetails = e.html;
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.mode == "add") {
            apiArticleAdd(this.form).then((res) => {
              if (res.code == "SUCCESS") {
                this.$message({
                  type: "success",
                  message: "操作成功",
                });
                this.$router.back();
              }
            });
          } else if (this.mode == "edit") {
            apiArticleEdit({ ...this.form, articleId: this.articleId }).then((res) => {
              if (res.code == "SUCCESS") {
                this.$message({
                  type: "success",
                  message: "操作成功",
                });
                this.$router.go(-1);
                
              }
            });
          }
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .row {
  display: flex;
  .span4 {
    flex: 1;
  }
  .span20 {
    flex: 5;
  }
}
</style>
